<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
  <script src="https://unpkg.com/vue"></script>
	</head>
	<body>
		<div id="app" >
			 <input type="number" v-model.number="firstNumber" step="20" />
			 +
			 <input type="number" v-model.number="secondNumber" step="20" />
			 =
			 {{result}}
			 <p>
				 <animated-integer v-bind:value="firstNumber"></animated-integer>+
				 <animated-integer v-bind:value="secondNumber"></animated-integer>=
				 <animated-integer v-bind:value="result"></animated-integer>
			 </p>
		</div>
		<script type="text/javascript">
			
			// 这种复杂的补间动画逻辑可以被复用
			// 任何整数都可以执行动画
			// 组件化使我们的界面十分清晰
			// 可以支持更多更复杂的动态过渡
			// 策略。
			Vue.component('animated-integer', {
			  template: '<span>{{ tweeningValue }}</span>',
			  props: {
			    value: {
			      type: Number,
			      required: true
			    }
			  },
			  data: function () {
			    return {
			      tweeningValue: 0
			    }
			  },
			  watch: {
			    value: function (newValue, oldValue) {
			      this.tween(oldValue, newValue)
			    }
			  },
			  mounted: function () {
			    this.tween(0, this.value)
			  },
			  methods: {
			    tween: function (startValue, endValue) {
			      var vm = this
			      function animate () {
			        if (TWEEN.update()) {
			          requestAnimationFrame(animate)
			        }
			      }
			
			      new TWEEN.Tween({ tweeningValue: startValue })
			        .to({ tweeningValue: endValue }, 500)
			        .onUpdate(function () {
			          vm.tweeningValue = this.tweeningValue.toFixed(0)
			        })
			        .start()
			
			      animate()
			    }
			  }
			})
			
			// 所有的复杂度都已经从 Vue 的主实例中移除！
			new Vue({
				el:'#app',
				data:{
					firstNumber:20,
					secondNumber:40,
				},
				computed:{
					result:function(){
						return this.firstNumber+this.secondNumber;
					}
				}
			})
			
		</script>	
		<style type="text/css">
			 svg {
			        display: block;
			      }
			      polygon {
			        fill: #41b883;
			      }
			      circle {
			        fill: transparent;
			        stroke: #35495e;
			      }
			      input[type="range"] {
			        display: block;
			        width: 100%;
			        margin-bottom: 15px;
			      }
		</style>
	</body>
</html>
